<template>
	<view class="pages">
		<view class="nav-back">
			<u-icon name="arrow-leftward" size="45rpx" color="#fff"></u-icon>
			<text>数字专辑</text>
		</view>

		<!-- 轮播 -->
		<view class="banner">
			<Banner :banners="banners"></Banner>
		</view>

		<!-- 入口菜单 -->
		<view class="menu">
			<view v-for="(item,index) in menu" :key="index" class="menu-item">
				<image :src="item.icon" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<u-line></u-line>

		<!-- 最新专辑 -->
		<view class="new_shelves">
			<view class="new_title">
				<text style="margin-right: 15rpx;">最新上架 ></text>
			</view>

			<view class="new_content" v-for="(item,index) in products" :key="index" @tap="godetail(item.albumId)">
				<view class="film"></view>
				<image :src="item.coverUrl" class="new_content-img"></image>
				<view class="new_name">
					<u--text :text="item.albumName" lines="1" size="30rpx"></u--text>
					<u--text :text="item.artistName" lines="1" size="25rpx" color="#999"></u--text>
					<u--text :text="'￥'+item.price" lines="1" size="25rpx" color="red"></u--text>
					<!-- <text>￥{{item.price}}</text> -->
				</view>
			</view>
		</view>
		<!-- 数字榜单 -->
		<view class="list">
			<view class="list-top">
				<u--text text="数字专辑榜 >" size="35rpx"></u--text>
				<view class="tabs" v-for="(item,index) in tabs" :key="index">
					<text :class="{active:!(index- current)}" @click="change(index,item.type)">{{item.title}}</text>
				</view>
			</view>
			<swiper class="swiper-info" next-margin="20rpx">
				<swiper-item v-for="(item,index) in this.tabs[current].allist" :key="index">
					<view class="daily" v-for="(child,indez) in item" :key="indez" @click="test(index,indez)" @tap="godetail(child.albumId)">
						<view class="daily-avatar">
							<view class="circle"></view>
							<image :src="child.coverUrl"></image>
						</view>
						<view class="daily-title">
							<text class="daily-title-index">{{4 * index + indez +1}}</text>
							<text class="daily-title-name">{{child.albumName}}</text>
						</view>
						<view class="daily-btn">
							<u-button text="支持" shape="circle" size="mini"></u-button>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 数字榜单 -->
		<view class="list">
			<view class="list-top">
				<u--text text="数字单曲榜 >" size="35rpx"></u--text>
				<view class="tabs" v-for="(item,index) in tabs" :key="index">
					<text :class="{active:!(index- active)}" @click="change2(index,item.type)">{{item.title}}</text>
				</view>
			</view>
			<swiper class="swiper-info" next-margin="20rpx">
				<swiper-item v-for="(item,index) in this.tabs[active].songlist" :key="index">
					<view class="daily" v-for="(child,indez) in item" :key="indez" @click="test(index,indez)">
						<view class="daily-avatar">
							<view class="circle"></view>
							<image :src="child.coverUrl"></image>
						</view>
						<view class="daily-title">
							<text class="daily-title-index">{{4 * index + indez +1}}</text>
							<text class="daily-title-name">{{child.albumName}}</text>
						</view>
						<view class="daily-btn">
							<u-button text="支持" shape="circle" size="mini"></u-button>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="foot">
			<u-divider text="没有更多啦~"></u-divider>
		</view>
	</view>
</template>

<script>
	import Banner from '@/components/Banner.vue';

	import {
		getBanner,
		_getAlbumNewest,
		_getAlbumList
	} from '@/http/home.js'
	export default {
		components: {
			Banner
		},
		data() {
			return {
				banners: [],
				menu: [{
						icon: 'https://via.placeholder.com/80x80.png/fd5f5f',
						name: '畅销榜'
					},
					{
						icon: 'https://via.placeholder.com/80x80.png/fd5f5f',
						name: '语种风格馆'
					},
					{
						icon: 'https://via.placeholder.com/80x80.png/fd5f5f',
						name: '已购'
					},
				],
				tabs: [{
						title: '日榜',
						type: 'daily',
						limit: 12,
						allist: [],
						songlist:[]

					}, {
						title: '周榜',
						type: 'week',
						limit: 12,
						allist: [],
						songlist:[]
					},
					{
						title: '总榜',
						type: 'total',
						limit: 12,
						allist: [],
						songlist:[]
					}
				],
				current: 0,
				active:0,
				products: [],
				products2:[],
				limit: 12,
			};
		},
		methods: {
			// 获取轮播图
			async banner() {
				const {
					banners = []
				} = await getBanner()
				banners.forEach((item) => {
					item.image = item.imageUrl
					if (item.targetType == 3000) {
						this.banners.push(item)
					}
				})
			},
			// 获取最新榜单
			async AlbumNewest() {
				const {
					products = []
				} = await _getAlbumNewest(6)
				this.products = products
			},

			// 获取数字专辑&数字单曲-榜单
			async AlbumList() {
				const el = this.tabs[this.current]
				const params = {
					type: el.type,
					albumType: 0,
					limit: el.limit,
				}

				const params2 = {
					type: el.type,
					albumType: 1,
					limit: el.limit,
				}
				const {
					products: res
				} = await _getAlbumList(params2)
				for (let i = 0; i < res.length; i + 3) {
					this.tabs[this.active].songlist.push(res.splice(i, i + 4))
				}

				const {
					products = []
				} = await _getAlbumList(params)
				for (let i = 0; i < products.length; i + 3) {
					this.tabs[this.current].allist.push(products.splice(i, i + 4))
				}


			},
			change(index, type) {
				this.current = index
				this.AlbumList()
			},
			change2(index, type) {
				this.active = index
				this.AlbumList()
			},
			changCurrent(e) {
				this.current = e.detail.current
				this.AlbumList()
			},
			test(index, indez) {
				const subscript = 4 * index + indez;
				console.log(subscript);
			},
			godetail(id){
				uni.navigateTo({
					url:'/view/AlbumList/AlbumList?id=' + id
				})
			}

		},
		mounted() {
			this.banner()
			this.AlbumNewest()
			this.AlbumList()
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		// background-color: #f6f6f6;
		font-family: STXihei;
	}

	.active {
		color: #fd5f5f;
	}

	.nav-back {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1;
		display: flex;
		padding: 30rpx;
		background-color: #375462;

		text {
			margin-left: 30rpx;
			color: #fff;
			font-size: 35rpx;
		}
	}

	.menu {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 15rpx 30rpx;
			font-size: 30rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-bottom: 15rpx;
			}
		}
	}

	.new_shelves {
		margin: 30rpx;

		.new_title {
			display: flex;
			font-weight: bold;

		}

		.new_content {
			margin-top: 30rpx;
			width: 33%;
			display: inline-block;
			position: relative;

			&-img {
				width: 80%;
				height: 190rpx;
				position: absolute;
				top: 0rpx;
				border-radius: 15rpx;
			}

			.film {
				margin: 0 30rpx;
				width: 80%;
				height: 190rpx;
				background-color: #000000;
				border-radius: 50%;

			}

			.new_name {
				display: flex;
				flex-direction: column;
				overflow: hidden;
			}
		}
	}

	.list {
		margin: 60rpx 30rpx;

		&-top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.tabs {
				padding-left: 30rpx;
				font-size: 30rpx;
			}
		}
	}

	.swiper-info {
		height: 430rpx;
	}

	.daily {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		position: relative;

		&-avatar,
		&-btn {
			width: 120rpx;
			// border: 1px solid red;

			.circle {
				width: 85rpx;
				height: 85rpx;
				border-radius: 50%;
				background-color: #000000;
				margin-left: 20rpx;
			}

			image {
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				top: 0;
				border-radius: 10rpx;
			}
		}

		&-title {
			margin: 0 15rpx;
			flex: 1;
			font-size: 30rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			&-index {
				margin-right: 25rpx;
				font-weight: bold;
				color: #999;
			}


		}

		&-btn {
			margin-right: 15rpx;
		}

	}
</style>
